<template>
  <div id="container">
    <template>
        <div >
            <el-row :gutter="20">
              <el-col :span="6">
                <div>
                  <el-statistic group-separator=","  :value="numdata.value2" title="用户总数量*100">
                    <template slot="prefix">
                      <i class="el-icon-user-solid" style="color: red; font-size: 20px;"></i>
                    </template>
                  </el-statistic>
                </div>
              </el-col>
                  <el-col :span="6">
                <div>
                  <el-statistic  title="申请总数量*100">
                    <template slot="prefix">
                      <i class="el-icon-s-order" style="color: blue; font-size: 20px;"></i>
                    </template>
                    <template slot="formatter">
                        {{numdata.value1}}
                    </template>

                  </el-statistic>
                </div>
              </el-col>
              <el-col :span="6">
                <div>
                  <el-statistic group-separator=","  decimal-separator="." :value="numdata.value3" title="答题总数量*100">
                    <template slot="prefix">
                      <i class="el-icon-s-release" style="color: red;font-size: 20px;"></i>
                    </template>
                    <template slot="suffix">
                      <i class="el-icon-s-claim" style="color: blue;font-size: 20px;"></i>
                    </template>
                  </el-statistic>
                </div>
          
          </el-col>
          <el-col :span="6">
            <div>
              <el-statistic :value="numdata.value4" title="路线总数量*100">
                <template slot="suffix">
                  <span @click="like = !like" class="like">
                    <i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
                    <i class="el-icon-star-off"  v-show="!like"></i>
                  </span> </template>
              </el-statistic>
            </div>
          </el-col>
          </el-row>
        </div>
    </template>
        <div id="d3">
          <h3 style=" color: gray;">&nbsp;旅程数据资料 --柱型图</h3>
        </div>
    </div>
</template>

<script>
import httpApi from '@/http';
import * as echarts from 'echarts';
  export default {
    data(){
      return{
        like: true,
        numdata:{
          value1: 4154.564,
          value2: 2222,
          value3: 300,
          value4: 290,
        },
        
        // 图
        seriesData:[],
        num: 0
      }
    },
    watch:{
      
    },
    methods:{
        routedata(){
          httpApi.IndexApi.queryRoute().then( res =>{
            console.log(res);
            this.numdata.value4 = parseInt(res.data.data[0].count * 100)
          })
        },
        applicationdata(){
          httpApi.IndexApi.queryApplication().then( res =>{
            // console.log(res);
            this.numdata.value3 = parseInt(res.data.data[0].count * 100)
          })
        },
        applydata(){
          httpApi.IndexApi.queryApply().then( res =>{
            // console.log(res);
            this.numdata.value1 = parseInt(res.data.data[0].count * 100)
          })
        },
        userdata(){
           httpApi.IndexApi.queryUser().then( res =>{
            //  console.log(res);
            this.numdata.value2 = parseInt(res.data.data[0].count * 100)
           })
        },
        imgd1(){
          httpApi.IndexApi.queryAnimal().then( res =>{
            this.num =parseInt(res.data.data.page[0].count1 * 10) 
            // console.log('接口'+this.num);
            this.seriesData.push(`${parseInt(res.data.data.page[0].count1 * 10) }`)
            // console.log( this.seriesData);
          })
          httpApi.IndexApi.queryScenery().then(res =>{
            this.seriesData.push(`${parseInt(res.data.data.page[0].count2 * 10) }`)
              // console.log( this.seriesData);
          })
          httpApi.IndexApi.queryStory().then(res =>{
            this.seriesData.push(`${parseInt(res.data.data.page[0].count3 * 10) }`)
              console.log( this.seriesData);
          })
          // console.log('图表'+this.num);
          // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('d3'));
        // 绘制图表
        myChart.setOption({
          title: {
            text: '可可西里资料数据信息*10/*100'
          },
          tooltip: {},
          xAxis: {
            data: ['动植', '山水', '人文','用户数量', '申请数量', '答题数量','路线数量']
          },
          yAxis: {},
          series: [
            {
              name: '销量',
              type: 'bar',
              data:  [130, 100, 70, 1400, 100, 300, 2900]
            }
          ]
        });
      },

     
      
    },
    mounted(){
          this.imgd1()
          this. userdata()
          this. applydata()
          this.routedata()

      
    }
  }
</script>

<style lang="scss" scoped>
.like {
  cursor: pointer;
  font-size: 25px;
  display: inline-block;
}
    #container{
      // background-color: black;
      width: 80%;
      height: 85%;
      position: fixed;
      // top: 0px;
      left: 250px;
      right: 0px;
      bottom: -5px;
      #d3{
            position: absolute;
            // background: blueviolet;
            left: 0px;
            bottom: 0;
            width: 100%;
            height: 70%;
           
            
        }
    }
  
       
</style>